<template>
  <div class="level-report">
    <!-- 等级分布统计 -->
    <el-row :gutter="20" class="level-cards">
      <el-col :span="6">
        <div class="level-card normal">
          <div class="level-name">普通会员</div>
          <div class="level-count">{{ normalCount.toLocaleString() }}</div>
          <div class="level-percent">{{ normalPercent }}%</div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="level-card silver">
          <div class="level-name">银卡会员</div>
          <div class="level-count">{{ silverCount.toLocaleString() }}</div>
          <div class="level-percent">{{ silverPercent }}%</div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="level-card gold">
          <div class="level-name">金卡会员</div>
          <div class="level-count">{{ goldCount.toLocaleString() }}</div>
          <div class="level-percent">{{ goldPercent }}%</div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="level-card diamond">
          <div class="level-name">钻石会员</div>
          <div class="level-count">{{ diamondCount.toLocaleString() }}</div>
          <div class="level-percent">{{ diamondPercent }}%</div>
        </div>
      </el-col>
    </el-row>

    <!-- 等级分布图表 -->
    <el-row :gutter="20" style="margin-top: 20px;">
      <el-col :span="12">
        <el-card>
          <template #header>
            <span>📊 等级分布占比</span>
          </template>
          <div class="chart-container" ref="levelDistChart"></div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card>
          <template #header>
            <span>📈 等级变化趋势</span>
          </template>
          <div class="chart-container" ref="levelTrendChart"></div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 等级价值分析 -->
    <el-card style="margin-top: 20px;">
      <template #header>
        <span>💰 等级价值贡献</span>
      </template>
      <div class="chart-container" ref="levelValueChart"></div>
    </el-card>

    <!-- 等级数据明细 -->
    <el-card style="margin-top: 20px;">
      <template #header>
        <span>📋 等级数据分析</span>
      </template>
      <el-table :data="levelData" border stripe>
        <el-table-column prop="level" label="会员等级" width="120">
          <template #default="{ row }">
            <el-tag :type="getLevelTag(row.level)">{{ row.level }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="count" label="人数" width="100">
          <template #default="{ row }">
            {{ row.count.toLocaleString() }}
          </template>
        </el-table-column>
        <el-table-column prop="percent" label="占比" width="100">
          <template #default="{ row }">
            {{ row.percent }}%
          </template>
        </el-table-column>
        <el-table-column prop="avgConsumption" label="人均消费" width="120">
          <template #default="{ row }">
            ¥{{ row.avgConsumption.toLocaleString() }}
          </template>
        </el-table-column>
        <el-table-column prop="totalConsumption" label="总消费" width="150">
          <template #default="{ row }">
            ¥{{ row.totalConsumption.toLocaleString() }}
          </template>
        </el-table-column>
        <el-table-column prop="contributionRate" label="贡献率" width="100">
          <template #default="{ row }">
            {{ row.contributionRate }}%
          </template>
        </el-table-column>
        <el-table-column prop="activeRate" label="活跃率" width="100">
          <template #default="{ row }">
            {{ row.activeRate }}%
          </template>
        </el-table-column>
        <el-table-column prop="churnRate" label="流失率" width="100">
          <template #default="{ row }">
            <span :style="{ color: getChurnColor(row.churnRate) }">
              {{ row.churnRate }}%
            </span>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import * as echarts from 'echarts'

const props = defineProps({
  dateRange: { type: Array, default: () => [] }
})

const normalCount = ref(78945)
const normalPercent = ref(62.8)
const silverCount = ref(32456)
const silverPercent = ref(25.8)
const goldCount = ref(12345)
const goldPercent = ref(9.8)
const diamondCount = ref(1932)
const diamondPercent = ref(1.5)

const levelData = ref([
  { level: '普通会员', count: 78945, percent: 62.8, avgConsumption: 1256, totalConsumption: 99186720, contributionRate: 38.5, activeRate: 45.2, churnRate: 15.8 },
  { level: '银卡会员', count: 32456, percent: 25.8, avgConsumption: 5678, totalConsumption: 184267968, contributionRate: 35.6, activeRate: 68.5, churnRate: 8.3 },
  { level: '金卡会员', count: 12345, percent: 9.8, avgConsumption: 12560, totalConsumption: 155050200, contributionRate: 22.4, activeRate: 82.6, churnRate: 4.2 },
  { level: '钻石会员', count: 1932, percent: 1.5, avgConsumption: 45678, totalConsumption: 88249896, contributionRate: 13.5, activeRate: 95.8, churnRate: 1.2 }
])

const levelDistChart = ref(null)
const levelTrendChart = ref(null)
const levelValueChart = ref(null)

onMounted(() => {
  initLevelDistChart()
  initLevelTrendChart()
  initLevelValueChart()
})

const initLevelDistChart = () => {
  const chart = echarts.init(levelDistChart.value)
  chart.setOption({
    tooltip: { trigger: 'item' },
    legend: { orient: 'vertical', left: 'left' },
    series: [
      {
        name: '会员等级',
        type: 'pie',
        radius: '60%',
        data: [
          { value: 78945, name: '普通会员', itemStyle: { color: '#909399' } },
          { value: 32456, name: '银卡会员', itemStyle: { color: '#c0c0c0' } },
          { value: 12345, name: '金卡会员', itemStyle: { color: '#f5af19' } },
          { value: 1932, name: '钻石会员', itemStyle: { color: '#667eea' } }
        ]
      }
    ]
  })
}

const initLevelTrendChart = () => {
  const chart = echarts.init(levelTrendChart.value)
  chart.setOption({
    tooltip: { trigger: 'axis' },
    legend: { data: ['普通', '银卡', '金卡', '钻石'] },
    xAxis: {
      type: 'category',
      data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月']
    },
    yAxis: { type: 'value' },
    series: [
      {
        name: '普通',
        type: 'line',
        data: [76543, 77234, 77890, 78123, 78456, 78678, 78945]
      },
      {
        name: '银卡',
        type: 'line',
        data: [31234, 31678, 31890, 32012, 32178, 32289, 32456]
      },
      {
        name: '金卡',
        type: 'line',
        data: [11890, 12012, 12123, 12234, 12345, 12456, 12567]
      },
      {
        name: '钻石',
        type: 'line',
        data: [1756, 1823, 1867, 1890, 1912, 1934, 1958]
      }
    ]
  })
}

const initLevelValueChart = () => {
  const chart = echarts.init(levelValueChart.value)
  chart.setOption({
    tooltip: { trigger: 'axis' },
    legend: { data: ['人数占比', '消费贡献'] },
    xAxis: {
      type: 'category',
      data: ['普通会员', '银卡会员', '金卡会员', '钻石会员']
    },
    yAxis: { type: 'value', max: 100 },
    series: [
      {
        name: '人数占比',
        type: 'bar',
        data: [62.8, 25.8, 9.8, 1.5],
        itemStyle: { color: '#409eff' }
      },
      {
        name: '消费贡献',
        type: 'bar',
        data: [38.5, 35.6, 22.4, 13.5],
        itemStyle: { color: '#67c23a' }
      }
    ]
  })
}

const getLevelTag = (level) => {
  const map = { '普通会员': 'info', '银卡会员': '', '金卡会员': 'warning', '钻石会员': 'danger' }
  return map[level] || 'info'
}

const getChurnColor = (rate) => {
  if (rate >= 10) return '#f56c6c'
  if (rate >= 5) return '#e6a23c'
  return '#67c23a'
}
</script>

<style scoped>
.level-report {
  padding: 20px 0;
}

.level-cards {
  margin-bottom: 20px;
}

.level-card {
  padding: 30px;
  border-radius: 12px;
  text-align: center;
  color: white;
  transition: all 0.3s;
}

.level-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

.level-card.normal {
  background: linear-gradient(135deg, #909399 0%, #606266 100%);
}

.level-card.silver {
  background: linear-gradient(135deg, #c0c0c0 0%, #8e9eab 100%);
}

.level-card.gold {
  background: linear-gradient(135deg, #f5af19 0%, #f12711 100%);
}

.level-card.diamond {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.level-name {
  font-size: 18px;
  margin-bottom: 15px;
}

.level-count {
  font-size: 42px;
  font-weight: bold;
  margin-bottom: 10px;
}

.level-percent {
  font-size: 16px;
  opacity: 0.9;
}

.chart-container {
  height: 350px;
}
</style>

